import React, {lazy, Suspense} from 'react';
import {changeTdk, goSystem, setScrollTop} from '../../assets/js/utils';
import hoc from './indexHoc';
import ScrollAnim from 'rc-scroll-anim';

import  Css from '../../assets/css/job/index.css';
const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
const JobComponent=hoc((props)=>{
    const ScrollParallax =  ScrollAnim.Parallax;
    return(
        <React.Fragment>
            <div className={Css['job_banner']} id='indSuccess'>
                <ScrollParallax
                    className={Css['job_ban_bg']}
                    style={{backgroundImage:'url('+props.aBan.img+')'}}
                    location='indSuccess'
                    animation={{y:0, playScale: [0.9, 1.5]}}
                ></ScrollParallax>
                <div className={Css['jobBanCen']}>
                    <p>
                        <strong>{props.aBan.title}</strong>
                        {props.aBan.list}
                    </p>
                    <div className={Css['banBtn']} id='contTop' onClick={props.goPages.bind(this,props.aBan.url)}>{props.aBan.btn}</div>
                </div>
            </div>
            <div className={Css['jobPlansCen']}>
                <div className={Css['jobTitle']}>人才计划+</div>
                <ul>
                    {
                        props.aPlan.length>0?
                            props.aPlan.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <div className={Css['jobPlansCenImg']}><img src={item.img} alt={item.title} /></div>
                                        <div className={Css['jobPlansCenTitle']}>{item.title}</div>
                                        <div className={Css['jobPlansCenList']}>
                                            {item.list}
                                        </div>
                                    </li>
                                )
                            })
                            :''
                    }
                </ul>
            </div>
            <div className={Css['jobBenCen']}>
                <div className={Css['jobTitle']}>福利计划+</div>
                <div className={Css['jobTitleEr']}>关爱通在打造“爱在其中”生态圈的同时，更是员工关爱的践行者。</div>
                <div className={Css['jobBenCenLive']}>
                    <ul>
                        {
                            props.aBen.length>0?
                                props.aBen.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            {
                                                index%2!==0?
                                                    <div className={Css['jobBenCenLiveImg']}>
                                                        <img src="//www.guanaitong.com/images/loading.gif" data-echo={item.img} alt='' />
                                                    </div>
                                                    :""
                                            }
                                            <div className={Css['jobBenCenLiveFont']}>
                                                <p>{item.title}</p>
                                                <span dangerouslySetInnerHTML={{__html:item.list}}></span>
                                            </div>
                                            {
                                                index%2===0?
                                                    <div className={Css['jobBenCenLiveImg']}>
                                                        <img src="//www.guanaitong.com/images/loading.gif" data-echo={item.img} alt='' />
                                                    </div>
                                                    :""
                                            }
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
                <div className={Css['jobBenCenFl']}>
                    <ul>
                        {
                            props.aWin8.length>0?
                                props.aWin8.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            <div className={Css['jobBenCenFlTitle']}>{item.title}</div>
                                            <div className={Css['jobBenCenFlImg']}>
                                                <img src="//www.guanaitong.com/images/loading.gif"  data-echo={item.img} alt='' /></div>
                                            <div className={Css['jobBenCenFlFont']}>
                                                {
                                                    item.list.length>0?
                                                        item.list.map((item2,index2)=>{
                                                            return(
                                                                <p key={index2} dangerouslySetInnerHTML={{__html:item2.title}}></p>
                                                            )
                                                        })
                                                        :''
                                                }

                                            </div>
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
            </div>
            <div className={Css['jobCont']}>
                <ScrollParallax
                    className={Css['jobCont_bg']}
                    style={{backgroundImage:'url('+props.aCont.img+')'}}
                    animation={{y:0, playScale: [0.2, 1.5]}}
                ></ScrollParallax>
                <div className={Css['jobContCen']}>
                    <p>{props.aCont.title}</p>
                    <span>{props.aCont.list}</span>
                    <div className={Css['contBtn']} id='contBottom' onClick={props.goPages.bind(this,props.aCont.url)}>{props.aCont.btn}</div>
                </div>
            </div>
        </React.Fragment>
    )
})
class job extends React.Component{
    constructor(){
        super();
        this.state={
            title:'加入我们-中智关爱通',
            description:'关爱通欢迎您的加入！我们为员工提供节日福利、生日福利、午餐补贴、体检、保险等丰富的弹性福利项目，全方位的培训发展体系，秉承“责任、信任、快乐、创新”的文化价值观，构建“爱在其中”生态圈。',
            keywords:'人才招聘,员工福利,企业文化,学习培训,中智关爱通',
            aBan:{},
            aPlan:[],
            aBen:[],
            aWin8:[],
            aCont:{},
        }
    }
    componentDidMount(){
        this.goSystem();
        setTimeout(()=>{
            this.getABanData();
            this.getAPlanData();
            this.getaBenData();
            this.getAContData();
        },200)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    // 获取banner数据
    getABanData(){
        let temABan={
                img:require('../../assets/images/job/job1.jpg'),
                title:'招贤纳士',
                list:'人才 ｜ 文化 ｜ 领导力',
                btn:'加入我们',
                url:'position'
            };
        this.setState({aBan:temABan})
    }
    //获取人才计划数据
    getAPlanData(){
        let temAPlan=[
            {
                img:require('../../assets/images/job/job1.png'),
                title:'以人为本，诚心“爱”意',
                list:'运用学习地图将人才培养从战略转化为实践，从能力培养到学习计划，致力于为员工提供全方位，多通道的发展平台和分层分类的员工培训发展体系。'
            },
            {
                img:require('../../assets/images/job/job2.png'),
                title:'企业文化，以“爱”传递',
                list:'关爱通以 “感受爱、传递爱”（give & get）为传递机制，构建企业、员工、社会相互支持，共同发展的“爱在其中”生态圈，秉承“责任、信任、快乐、创新”的文化价值观。'
            },
            {
                img:require('../../assets/images/job/job3.png'),
                title:'聚焦员工，见证成长',
                list:'“双向职业晋升阶梯”体系，全方位满足员工职业发展需求。社招新人经历“180天橙变”快速成长，管培生体验专属“橙星计划”全面进阶，另有为全体员工打造的“橙长学院”，让你摇身一变成为“橙长导师”或“金牌内训师”。'
            }
        ];
        this.setState({aPlan:temAPlan})
    }
    //获取福利计划平台
    getaBenData(){
        let temABen=[
            {
                img:require('../../assets/images/job/job2.jpg'),
                title:'“爱”之保障',
                list:'五险一金 法定节假日<br />员工重大疾病、意外、门急诊补充医疗保险计划<br />午餐补贴、加班餐补、加班车补<br />体检、健康、其他保险等丰富弹性福利项目'
            },
            {
                img:require('../../assets/images/job/job3.jpg'),
                title:'“爱”之节日',
                list:'各类节日礼品、<br />生日派对、<br />Team-building等<br />多达20多项福利项目'
            },
            {
                img:require('../../assets/images/job/job4.jpg'),
                title:'“爱”之组织',
                list:'有一群可爱的HR小姐姐们，和一个有温度的工会，<br />365日精心筹办丰富精彩的娱乐活动！'
            }
        ],
        temAWin8=[
            {
                title:'保险福利',
                img:require('../../assets/images/job/job5.jpg'),
                list:[
                    {title:'· 社会保险<br />· 人身险'},
                    {title:'·　重大疾病险<br />·　医疗险'},
                    {title:'·　医疗特需金<br />·　商旅险'}
                ]
            },
            {
                title:'健康福利',
                img:require('../../assets/images/job/job6.jpg'),
                list:[
                    {title:'·　入职体检<br />·　法定年假<br />·　EAP'},
                    {title:'·   心理测评<br />·   住院慰问金<br />·   个人&子女重大疾病补助'},
                ]
            },
            {
                title:'假期福利',
                img:require('../../assets/images/job/job7.jpg'),
                list:[
                    {title:'·　公共假期<br />·　年度体检<br />·　公司福利年假'},
                    {title:'·   带薪病假<br />·   其他假期'},
                ]
            },
            {
                title:'津贴补助福利',
                img:require('../../assets/images/job/job8.jpg'),
                list:[
                    {title:'·　通讯补助<br />·　午餐补助<br />·　奋斗补贴<br />·　喜结良缘/喜得贵子'},
                    {title:'·　高温补贴/夏日福利<br />·　直系亲属去世慰问金<br />·　义务献血补贴'},
                ]
            },
            {
                title:'年节福利',
                img:require('../../assets/images/job/job9.jpg'),
                list:[
                    {title:'·　春节<br />·　妇女节<br />·　儿童节'},
                    {title:'·　端午节<br />·　中秋节<br />·　圣诞'},
                ]
            },
            {
                title:'其他福利',
                img:require('../../assets/images/job/job10.jpg'),
                list:[
                    {title:'·　入职纪念<br />·　生日惊喜'},
                    {title:'·　长期服务'},
                ]
            },
            {
                title:'文化娱乐',
                img:require('../../assets/images/job/job11.jpg'),
                list:[
                    {title:'·　团队拓展<br />·　运动会'},
                    {title:'·　各类沙龙<br />·　兴趣小组'},
                    {title:'·　公司年会<br />·　其他'},
                ]
            },
        ];
        this.setState({aBen:temABen,aWin8:temAWin8})
    }
    //获取联系我们数据
    getAContData(){
        let temACont={
                img:require('../../assets/images/job/job12.jpg'),
                title:'温暖、开放、高效的关爱通欢迎您的加入！',
                list:'把更好的给到员工',
                btn:'加入我们',
                url: 'position'
            };
        this.setState({aCont:temACont})
    }
    //跳转平台
    goSystem(){
        goSystem(this.props,'job')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aBan:this.state.aBan,
            aPlan:this.state.aPlan,
            aBen:this.state.aBen,
            aWin8:this.state.aWin8,
            aCont:this.state.aCont,
        }
        return(
            <React.Fragment>
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <JobComponent {...this.props} {...newProps}></JobComponent>
                <Suspense　fallback={<React.Fragment/>} >
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>
            </React.Fragment>
        )
    }
}
export default job